import React, {FC, useCallback, useContext} from 'react';
import "./HxJournalListItem.less";
import default_art_cover from "@/assets/default_art_cover.png";
import HxIcon from "@/components/HxIcon";
import {Link} from "umi";
import {Divider, Image} from "antd";
import JournalInfoMeta from "@/pages/JournalPage/JournalDetail/commons/JournalInfoMeta";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal} from "@/utils/biz";
import {history} from "@@/core/history";

interface HxJournalListItemProps {
  journal: API.FrontJournal
}

const HxJournalListItem: FC<HxJournalListItemProps> = (props) => {
  const {journal} = props;
  const {isZhCN} = useContext(HxConfigContext);

  const jump = useCallback(() => {
    history.push({
      pathname: `/journal/${journal?.id}`,
    })
  }, [journal]);

  return (
    <div className={"hx-journal-list-item-container"} onClick={(e) => {
      e.preventDefault();
      e.stopPropagation()
      jump();
    }}>
      <div className={"hx-journal-list-item-cover"}>
        <Image src={journal?.journalCoverPathUrl} fallback={default_art_cover} preview={false}/>
      </div>
      <div className={"hx-journal-list-item-body"}>
        <div className={"hx-journal-list-item-header"}>
          <div className={"hx-journal-list-item-title"}>
            {correspVal(isZhCN, journal?.journalNameCn, journal?.journalNameEn)}
          </div>
          {/*<div className={"hx-journal-list-item-tools"}>
            {
              journal?.journalWebsite && (
                <a target={"_blank"}
                   href={journal?.journalWebsite}
                   onClick={(e) => e.stopPropagation()}>
                  <HxIcon type={"hxicon-guanwang"}/> 访问官网
                </a>
              )
            }
            {
              journal?.wxMp && (<a><HxIcon type={"hxicon-weixin1"}/> 微信公众号</a>)
            }
          </div>*/}
          <Divider className={"hx-journal-list-item-divider1"}/>
          <JournalInfoMeta className={"hx-journal-list-item-meta"} journal={journal}/>
          <Divider className={"hx-journal-list-item-divider2"}/>
        </div>

        <div className={"hx-journal-list-item-content"}>
          {correspVal(isZhCN, journal?.journalBreviaryIntroductionCn, journal?.journalBreviaryIntroductionEn)}
        </div>
      </div>
    </div>
  );
};

export default HxJournalListItem;
